<template>
  <div class="app-container">
    <el-card class="box-card" style="margin: 0 auto">
      <div slot="header" class="clearfix">
        <span>上下班时间设置</span>
        <el-button type="primary" @click="onSubmit" style="float: right;margin: 5px">保存</el-button>
      </div>
      <div>
        <el-form :model="workTime" class="demo-form-inline" label-width="150px">
          <el-form-item label="上午开始时间">
            <el-time-picker
              v-model="workTime.earlyBegin"
              value-format="timestamp"
              placeholder="任意时间点">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="上午结束时间">
            <el-time-picker
              v-model="workTime.earlyEnd"
              value-format="timestamp"
              placeholder="任意时间点">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="下午开始时间">
            <el-time-picker
              v-model="workTime.lateBegin"
              value-format="timestamp"
              placeholder="任意时间点">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="下午结束时间">
            <el-time-picker
              v-model="workTime.lateEnd"
              value-format="timestamp"
              placeholder="任意时间点">
            </el-time-picker>
          </el-form-item>
          <el-form-item label="弹性上下班时间(分钟)">
            <el-input v-model="workTime.flexDuration" placeholder="30"/>
          </el-form-item>
          <el-form-item label="时长(小时)">
            <el-input v-model="workTime.duration" placeholder="30"/>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getWorkTime, modifyWorkTime } from '@/api/workTime'

const defaultWorkTime = {
  id: ''
}

export default {
  name: 'WorkTime',
  components: {},
  data() {
    return {
      workTime: Object.assign({}, defaultWorkTime)
    }
  },
  //方法集合
  methods: {
    async getWorkTime() {
      getWorkTime().then((res) => {
        this.workTime = res.data
        console.log(this.workTime)
      })
    },
    async onSubmit() {
      // 保存修改
      await modifyWorkTime(this.workTime.id, this.workTime)
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getWorkTime()
  }
}

</script>

<style scoped>
.demo-table-expand label {
  width: 160px;
  color: #99a9bf;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 480px;
}
</style>
